<template>
  <div class="tableRow">
    <el-row :gutter="10">
      <el-col :span="9">
        <el-card shadow="never" style="height: 120vh">
          <open-map mapWidth="100%" map-height="100vh" ref="areaMap" @positionChange="positionChangeHandler"
                    :vectorId="models.vectorId" :polygon="models.polygon" :position="models.position"></open-map>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card shadow="never" style="height: 120vh">
          <div slot="header">
            <n-title title="调查对象信息"/>
          </div>
          <survey-model ref="surveyComp" :structureId="models.structureId" tableHeight="80vh"></survey-model>
          <div style="display: flex;align-items: center;justify-content: center">
            <el-button size="small" @click="getBeforeData" type="primary">上一条</el-button> <el-button @click="getNextData" size="small" type="primary">下一条</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" style="height: 120vh">
          <div slot="header">
            <n-tab :options="[{label:'错误信息'}]"/>
          </div>
          <p style="color: #5b9a8e; font-size: 15px;font-weight: bold;">问题描述:</p>
          <p class="inspectSpan">系统质检:</p>
          <div>
            <el-row :gutter="10" v-for="(item, index) in models.inspectDetailList" :key="index" style="margin-bottom: 5px">
              <el-col :span="2">
                <div class="resultDetailNumber">
                  {{index+1}}
                </div>
              </el-col>
              <el-col :span="20">
              <div>
                <el-row :gutter="10">
                  <el-col :span="18">
                    <div class="resultDetailMsg">【{{item.subFieldName}}】{{item.resultMsg}}</div>
                  </el-col>
                  <el-col :span="6">
                    <el-button type="primary" icon="el-icon-edit-outline" @click="toggleTexAreaShow(index)" :disabled="item.resultState!='0'" size="mini" plain></el-button>
                  </el-col>
                </el-row>
                <el-row :gutter="10" v-if="item.showTag">
                  <el-col :span="18">
                    <el-input type="textarea" v-model="item.manualMsg" :disabled="item.resultState!='0'"/>
                  </el-col>
                  <el-col :span="6">
                    <el-button type="primary" @click="submitManualInspect(index)" :disabled="item.resultState!='0'" icon="el-icon-check" size="mini" plain></el-button>
                  </el-col>
                </el-row>
              </div>
              </el-col>
            </el-row>
          </div>
          <p class="inspectSpan">人工标错:</p>
          <div class="failMsgContent">
            暂无信息
          </div>
          <p class="inspectSpan">疑似错误:</p>
          <div class="failMsgContent">
            暂无信息
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import {Component, Vue, Ref} from 'vue-property-decorator';
import router from '@/router/index';
import OpenMap from '@/components/OpenMap.vue';
import SurveyModel from '@/components/SurveyModel.vue';
import {getFormData} from '@/api/investDataCommon';
import NTab from "@/components/NTab.vue";
import NTitle from "@/components/NTitle.vue";
import QuickInput from "@/views/quality/components/QuickInput.vue";
import {
  queryResultDetailDataId, queryResultDataDetail,updateResultDetail
} from '@/api/inspectTask';

@Component({components: {QuickInput, NTitle, NTab, SurveyModel, OpenMap}})
export default class InspectManualView extends Vue {

  @Ref("surveyComp") surveyComp!: any;
  @Ref("areaTreeSelect") areaTreeSelect!: any;
  @Ref("deptSelect") deptSelect!: any;
  @Ref("areaMap") areaMap!: any;
  serialNumber : any = router.currentRoute.query.serialNumber;
  models: any = {
    structureId: '',
    dataId: '',
    vectorId: '',
    position: '',
    inspectResultId: '',
    dataIdList: [],
    inspectDetailList: [],
    dataIndex:0
  }

  positionChangeHandler(val) {
    if (val && val.length > 0) {
      this.models.formData.point = val.join(',');
    }
  }

  getBeforeData() {
    let currentIndex = this.models.dataIndex-1
    if (currentIndex<0) {
      return
    }
    this.models.dataIndex = currentIndex
    this.models.dataId = this.models.dataIdList[currentIndex].dataId
    this.getSurveyModelFormData(this.models.dataId);
    this.getResultDataDetailList(this.models.dataId)
  }
  getNextData() {
    let currentIndex = this.models.dataIndex+1
    if (currentIndex >=this.models.dataIdList.length) {
      return
    }
    this.models.dataIndex = currentIndex
    this.models.dataId = this.models.dataIdList[currentIndex].dataId
    this.getSurveyModelFormData(this.models.dataId);
    this.getResultDataDetailList(this.models.dataId)
  }
  /**
   * 提交人工调整数据
   * @param index
   */
  submitManualInspect(index) {
    const item = this.models.inspectDetailList[index];
    updateResultDetail({"id":item.resultDetailId,"manualMsg":item.manualMsg}).then(res=>{
      if (res) {
        this.$message.success("更新成功");
      }
    }).catch(err=> {
      console.log(err)
    })
  }
  // 切换内容的显示与隐藏
  toggleTexAreaShow(index) {
    this.models.inspectDetailList[index].showTag = !this.models.inspectDetailList[index].showTag;
  }

  created() {
   this.initData();
  }
  //初始化数据
  initData() {
    this.models.structureId = router.currentRoute.query.structureId;
    this.models.inspectResultId = router.currentRoute.query.inspectResultId;
    queryResultDetailDataId({inspectResultId: router.currentRoute.query.inspectResultId}).then(res => {
      if (res.data) {
        this.models.dataIdList = res.data
      }
      if (this.models.dataIdList.length > 0) {
        this.models.dataId = this.models.dataIdList[0].dataId
        this.getSurveyModelFormData(this.models.dataIdList[0].dataId);
        this.getResultDataDetailList(this.models.dataIdList[0].dataId)
      }
    }).catch(e => {
      console.log(e)
    })
  }

  /**
   * 查询调查表的数据
   */
  getSurveyModelFormData(dataId) {
    if (dataId) {
      getFormData({id: dataId}).then(res => {
        const common: any = res.data.commonForm;
        this.models.areaId = common.areaId;
        this.models.vectorId = common.vectorId;
        if (common.position) {
          this.models.position = common.position.split(',');
        }
        this.models.polygon = common.polygon;
        this.surveyComp.addFormData(res.data);
      })
    }
  }

  /**
   * 查询质检结果、填报数据ID对应校验失败的数据
   */
  getResultDataDetailList(dataId) {
    if(dataId) {
      queryResultDataDetail({inspectResultId: router.currentRoute.query.inspectResultId, dataId: dataId}).then(res => {
        if (res.data) {
          this.models.inspectDetailList = res.data
        }
      })
    }
  }

  //重新加载数据用
  activated(){
    if (this.serialNumber != router.currentRoute.query.serialNumber) {
      this.initData();
    }
  }
}
</script>
<style>
.inspectSpan {
  font-size: 15px;
  font-weight: bold;
  padding-bottom: 6px;
  cursor: pointer;
  width: fit-content;
  padding-left: 5px;
}
.resultDetailNumber{
  display: inline-block;
  background-color: #015751;
  padding: 5px 10px;
  font-size: 15px;
  color: white;
}
.resultDetailMsg{
  font-size: 15px;
  color: #015751;
}
.failMsgContent{
  font-size: 13px;
  font-weight: bold;
  padding-bottom: 6px;
  cursor: pointer;
  width: fit-content;
  padding-left: 20px;
}
</style>
